<script setup lang="ts">
import { useNaiveForm } from '@/hooks/common/form';
import { $t } from '@/locales';

defineOptions({
  name: 'ConfigCategorySearch'
});

interface Emits {
  (e: 'search'): void;
}

const emit = defineEmits<Emits>();

const { formRef, validate } = useNaiveForm();

const model = defineModel<Api.Manage.ConfigCategorySearchParams>('model', { required: true });

async function search() {
  await validate();
  emit('search');
}
</script>

<template>
  <NCard :bordered="false" size="small" class="card-wrapper">
    <NCollapse :default-expanded-names="['user-search']">
      <NCollapseItem :title="$t('common.search')" name="user-search">
        <div class="form-container">
          <NForm ref="formRef" :model="model" label-placement="left" :label-width="60">
            <NGrid responsive="screen" item-responsive>
              <NFormItemGi span="24 s:10 m:10" label="关键字" path="keyword" class="pr-6px">
                <NInput v-model:value="model.keyword" placeholder="请输入字典名称或编码" clearable />
              </NFormItemGi>
              <NFormItemGi span="24 s:10 m:10" label="状态" path="status" class="pr-6px">
                <PorDictSelect v-model:value="model.status" dict-code="common_status" clearable />
              </NFormItemGi>
            </NGrid>
          </NForm>
          <NSpace class="fixed-buttons" justify="end">
            <NButton type="primary" ghost @click="search">
              <template #icon>
                <icon-ic-round-search class="text-icon" />
              </template>
              {{ $t('common.search') }}
            </NButton>
          </NSpace>
        </div>
      </NCollapseItem>
    </NCollapse>
  </NCard>
</template>

<style scoped>
.form-container {
  position: relative;
}

.fixed-buttons {
  position: absolute;
  right: 10px;
  bottom: 24px;
}
</style>
